 *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            text-decoration: none;
            list-style-type: none;
            font-family: 'Poppins', sans-serif;
        }



        body
        {
            background: #e0e0e0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
            width: 100%;
        }

        .content
        {
          
           margin-top: 2rem;
            font-size: 2em;
            font-weight: 500;
            -webkit-text-fill-color: white; 
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
          text-transform: uppercase;
          text-align: center;
        }
        


    
        

        .card-container
        {
           
            margin-top: 2.7rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 7rem;
        }


        .card
        {
            height: 20rem;
            width: 15rem;
            margin-bottom: 5rem;
            display: flex;
            align-items: center;
            flex-direction: column;
            background: #e0e0e0;
           box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;
            border-radius: 10px;
        }


        .img-container
        {
            height: 100px;
            width: 150px;
           display: flex;
           justify-content: center;
           margin-top: -2rem;
          
        }

        .profile-pic
        {
             height: 100%;
            width: 70%;
            filter: drop-shadow(4px 4px 4px grey);
            border: 5px solid #bebebe;
            border-radius: 50%;
          object-fit:cover;
 
        }


        .content-align
        {
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            margin-top: 2rem;
        }

        .content1
        {
          color: black;
          font-weight: 700;
        }

        .content2
        {
            color: gray;
            font-weight: 500;
        }

        .links
        {
            margin-top: 2rem;
            margin-bottom: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.3rem;
           
        }

        .social-box
        {
            height:40px;
            width: 40px;
            border-radius:50%;
            background: #e0e0e0;
            box-shadow:  5px 5px 10px #b3b3b3,
             -5px -5px 10px #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .social-box:hover
        {
            box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
        }

        .social-links
        {
            
         
            border-radius: 50%;
          color: black;
        }

        i
        {
            font-size: 1rem;
            
        }
        .fb
        {
            color: #4267B2;
        }
        .tweet
        {
            color: #1DA1F2;
        }

        .insta
        {
            color: #E1306C;
        }
        .ytb
        {
             color: #ff0000;
        }

        .btn
        {
            margin-top: 2rem;
            padding: 10px;
            background: #e0e0e0;
            box-shadow:  5px 5px 10px #b3b3b3,
             -5px -5px 10px #ffffff;
             font-weight: 500;
          border: none;
          outline: none;
          border-radius: 5px;
          cursor:pointer;

        }

        .btn:hover
        {
            box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
        }
